<!--商圈管理-->
<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <div v-if="false" class="search">
        <div class="content">
          <div class="part1">
            <div class="item">
              <span class="name">关键字</span>
              <el-input
                v-model="detail.keyword"
                class="input margin-left"
                placeholder="标题"
                maxlength="20"
                @keyup.enter.native="search"
              />
            </div>
            <div class="searchItem">
              <el-button type="success" round class="search-btn" @click="getList">搜索</el-button>
              <el-button round class="reset-btn" style="margin-left:20px;" @click="reset">重置</el-button>
              <el-button round class="add" style="margin-left:20px;" @click="$router.push('/user/add')">新增</el-button>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex">
        <div>
          <el-tree ref="tree" :data="areaList" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
        <div class="table margin-top padding-bottom">
          <el-table
            ref="multipleTable"
            empty-text="暂无数据"
            :data="list"
            style="width: 100%;"
            :row-style="{background: '#FCFDFF'}"
            :header-cell-style="{background:'#46705D',color:'#ffffff'}"
            @select-all="handleSelectAll"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column fixed type="index" label="序号" :show-overflow-tooltip="true" align="center" />
            <el-table-column label="名字" :show-overflow-tooltip="true" align="center" width="200">
              <template slot-scope="scope">
                <div>{{ scope.row.title }}</div>
              </template>
            </el-table-column>
            <el-table-column label="等级" :show-overflow-tooltip="true" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.level }}</div>
              </template>
            </el-table-column>
            <el-table-column label="简化序列号" :show-overflow-tooltip="true" align="center" width="200">
              <template slot-scope="scope">
                <div>{{ scope.row.simplify }}</div>
              </template>
            </el-table-column><el-table-column label="排序" :show-overflow-tooltip="true" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.sort }}</div>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" :show-overflow-tooltip="true" align="center" width="250">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toAdd(scope.row)">添加</el-button>
                <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="toDel(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
         <!-- <div class="pageContain margin-top">
            <div>
              <el-popover placement="right" trigger="hover" class="more">
                <div class="popover">
                  <div class="item hand" @click="toDels">删除</div>
                </div>
                <el-button slot="reference" class="moreDo">批量操作</el-button>
              </el-popover>
            </div>
			 <div style="flex: 1;text-align: right;">共{{pagination.total}}条</div>
            <el-pagination
              :current-page="pagination.page"
              :page-size="pagination.pageSize"
              :background="true"
              layout="prev, pager, next"
              :total="pagination.total"
              @current-change="handleCurrentChange"
            />
          </div> -->
        </div>
      </div>
    </el-scrollbar>
  </section>
</template>
<script>
import { areaList, areaDelete } from '@/api/api'
export default {
  data() {
    return {
      areaList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      list: [],
      pagination: {
        pageSize: 999,
        page: 1,
        total: 0
      },
      detail: {
        keyword: '',
        accountStatus: ''
      },
      statusOptions: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '正常'
        },
        {
          value: 0,
          label: '禁用'
        }],
      ids: []
    }
  },
  created() {
    this.getArea(0)
  },
  methods: {
    getArea(parentId) {
      if (this.areaList.length == 0) {
        areaList(parentId).then(({ data }) => {
          this.list = data
          this.areaList = data
		  this.pagination.total=data.data.total
        })
      } else {
        this.ulimite(this.areaList, parentId)
      }
    },
    ulimite(item, parentId, data) {
      item.forEach((item2, index2) => {
        if (item2.id === parentId && !item2.children) {
          areaList(parentId).then(({ data }) => {
            this.list = data
            this.$set(item2, 'children', [])
            item2.children = data
          })
          return false
        } else if (item2.id === parentId) {
          areaList(parentId).then(({ data }) => {
            this.list = data
          })
        }
        if (item2.children) {
          this.ulimite(item2.children, parentId, data)
        }
      })
    },
    handleNodeClick(data) {
      this.getArea(data.id)
    },
    toList(see) {
      this.$router.push({ path: '/user/see', query: { id: id }})
    },
    toEdit(item) {
      this.$router.push({ path: '/areaManage/add', query: { edit: JSON.stringify(item) }})
    },
    toAdd(item) {
      this.$router.push({ path: '/areaManage/add', query: { add: JSON.stringify(item) }})
    },
    editStatusSingle(type, id) {
      if (type == 1) {
        // 启用
        updateHospitalStatus({
          ids: [id],
          status: 1
        }).then(data => {
          Is.tip('启用成功')
          this.getList()
        })
      }
    },
    editStatusSingles(type) {
      if (Is.empty(this.ids)) {
        Is.tip('未选择编辑项')
        return false
      }
      if (type == 1) {
        // 启用
        updateHospitalStatus({
          ids: this.ids,
          status: 1
        }).then(data => {
          Is.tip('启用成功')
          this.getList()
        })
      }
      if (type == 0) {
        // 禁用
        updateHospitalStatus({
          ids: this.ids,
          status: 0
        }).then(data => {
          Is.tip('禁用成功')
          this.getList()
        })
      }
    },
    reset() {
      this.detail = {
        keyword: '',
        accountStatus: ''
      }
      this.pagination = {
        pageSize: 10,
        page: 1,
        total: 0
      }
      this.getList()
    },
    getList() {
      this.list = []
      this.areaList = []
      this.getArea(0)
    },
    handleSelectAll(selection) {
      this.ids = []
      if (selection.length > 0) {
        selection.forEach(item => {
          this.ids.push(item.id)
        })
      }
    },
    handleCurrentChange(val) {
      // 重置当前页码
      this.pagination.page = val
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = []
      if (selection.length > 0) {
        selection.forEach(item => {
          this.ids.push(item.id)
        })
      }
    },
    // 多选删除
    toDels() {
      if (Is.empty(this.ids)) {
        Is.tip('未选择删除项')
        return false
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        areaDelete(
          this.ids
        ).then(data => {
          Is.tip('删除成功', 1500, 'success')
          if (this.list.length === this.ids.length && this.pagination.page > 1) {
            this.pagination.page--
          }
          this.getList()
        })
      })
    },
    // 单选删除
    toDel(id) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        areaDelete(
          [id]
        ).then(data => {
          Is.tip('删除成功', 1500, 'success')
          if (this.list.length === 1 && this.pagination.page > 1) {
            this.pagination.page--
          }
          this.getList()
        })
      }).catch((e) => {

      })
    }
  }}
</script>
